<template>
  <div id="hotChange">
    <!-- {{JSON.parse(styles.divStyles[0].url).name}} -->
    <el-collapse v-model="activeNames2">
      <el-collapse-item title="内容样式" name="2">
        <ul class="content-list">
          <li>
            <span>上间距：</span>
            <div>
              <edgeSetting v-model="styles.marginTop" unit="px" :max="50" :init="Number(styles.marginTop)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>下间距：</span>
            <div>
              <edgeSetting v-model="styles.marginBottom" unit="px" :max="50" :init="Number(styles.marginBottom)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>左右间距：</span>
            <div>
              <edgeSetting v-model="styles.marginLR" unit="px" :max="50" :init="Number(styles.marginLR)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>圆角：</span>
            <div>
              <edgeSetting v-model="styles.circle" unit="px" :max="50" :init="Number(styles.circle)"></edgeSetting>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames1">
      <el-collapse-item title="内容" name="1">
        <ul class="content-list">
          <li>
            <span style="width:90px;margin-top:0">热区图片：</span>
            <div>
              <div v-if="styles.img==''">
                <p style="font-size:10px;color:#999">建议图片宽度750px,高度1000px以内,单张图片大小200kb以内</p>
                <el-button
                  @click.native="openUp"
                  size="small"
                  style="width:100%;margin-top:20px"
                  plain
                >+添加图片</el-button>
              </div>
              <div v-else>
                <p style="font-size:10px;color:#999">建议图片宽度750px,高度1000px以内,单张图片大小200kb以内</p>
                <div class="drawHotAreaContent2">
                  <img class="drawHotAreaBg2" draggable="false" :src="styles.img" />
                  <div
                    v-for="(v,i) in styles.divStyles"
                    :key="i"
                    class="react-drag2"
                    :style="{
                    width:v.width/2+'px',
                    height: v.height/2+'px',
                    left: '10px',
                    top: '10px',
                    transform: 'translateX('+v.sX/2+'px) translateY('+v.sY/2+'px)'}"
                  >
                    <span>{{v.name}}</span>
                  </div>
                  <span @click="openUp" class="upload-image">替换图片</span>
                </div>
                <el-button
                  @click="addHot"
                  size="small"
                  style="width:100%;margin-top:20px"
                  plain
                >+添加热区</el-button>
              </div>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <up ref="upData" @getImage="getImage"></up>
    <hotSetting ref="hotSetting" :styles="styles"></hotSetting>
  </div>
</template>

<script>
import up from "../../comm/up";
import { mapState, mapMutations } from "vuex";
import upLoadImage from "../../comm/upLoadImage";
import hotSetting from "./hotSetting";
import edgeSetting from "../../comm/edgeSetting";
export default {
  name: "hotChange",
  data() {
    return {
      img: require("../../../assets/img/blank.png"),
      activeNames1: "1",
      activeNames2: "2",
    };
  },
  components: {
    up,
    upLoadImage,
    hotSetting,
    edgeSetting,
  },
  computed: {
    ...mapState(["list", "currentId", "currentName"]),
    styles() {
      return this.list[this.currentId].styles;
    },
  },
  created(){
    
  },
  methods: {
    openUp() {
      this.$refs["upData"].isShown = true;
      this.$refs["upData"].getCategory();
      this.$refs["upData"].getPicNumber();
    },
    getImage(img) {
      this.styles.img = img;
    },
    addHot() {
      this.$refs["hotSetting"].hotShown = true;
      this.$refs["hotSetting"].init();
    },
  },
  
};
</script>


<style lang="less" scoped>
@import url("../../../assets/css/base.less");
img {
  display: block;
}
.drawHotAreaContent2 {
  width: 100%;
  height: auto;
  position: relative;
  transform: translate3d(0, 0, 0);
  overflow-x: hidden;
  overflow-y: hidden;
  .upload-image {
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px 0;
    width: 100%;
    cursor: pointer;
  }
}
.drawHotAreaBg2 {
  width: 100%;
  height: auto;
  vertical-align: middle;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.react-drag2 {
  border: 1px solid #38f;
  background: rgba(51, 136, 255, 0.5);
  color: #fff;
  position: absolute;
  user-select: auto;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  > span {
    font-size: 8px;
  }
}
</style>
